<template>
  <div>
    <!-- 学术模块 -->
    <div class="model">
      <div class="logo">
        <img src="@/assets/images/xs.png" alt="" />
      </div>
      <div class="content">
        <div class="bg"></div>
        <el-row :gutter="$store.state.device == 'pc' ? 20 : 0">
          <el-col :span="$store.state.device == 'pc' ? 16 : 24">
            <div class="left">
              <div class="swiper-contain" ref="swiper-contain">
                <div class="swiper-wrapper">
                  <div
                    class="swiper-slide"
                    v-for="(item, index) in list"
                    :key="index"
                  >
                    <a :href="item.path" target="_blank">
                      <div>
                        <el-divider content-position="right">{{
                          item.time
                        }}</el-divider>
                      </div>
                      <p class="title">
                        {{ item.title }}
                      </p>
                      <p class="name">
                        <i
                          class="iconfont icon-jiaoshi"
                          style="font-size:14px;font-weight:normal"
                        ></i>
                        {{ item.name }}
                      </p>
                      <p class="address">
                        <i
                          class="el-icon-location-information"
                          style="font-size:14px"
                        ></i>
                        {{ item.address }}
                      </p>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="$store.state.device == 'pc' ? 8 : 24">
            <div class="calder clearFix">
              <div style="width:85%; float:right;padding-right:15px;">
                <div class="el_divider"><span class="text">学术日历</span></div>
                <div class="calder-box">
                  <div class="tool">
                    <div class="prev el-icon-arrow-left"></div>
                    <div class="now">一月 2021</div>
                    <div class="next el-icon-arrow-right"></div>
                  </div>
                  <table class="calder-box-table">
                    <tr>
                      <td>一</td>
                      <td>二</td>
                      <td>三</td>
                      <td>四</td>
                      <td>五</td>
                      <td>六</td>
                      <td>日</td>
                    </tr>
                    <tr v-for="(item, index) in calData" :key="index">
                      <td v-for="(its, ind) in item" :key="index + '' + ind">
                        <template v-if="its == null"></template>
                        <span
                          :class="['date', value == its ? 'active' : '']"
                          v-else
                          >{{ its }}</span
                        >
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { dateFormat } from "@/utils/index.js";
export default {
  data() {
    return {
      value: null,
      list: [
        {
          path: "https://news.sjtu.edu.cn/xsjz/20201230/139167.html",
          time: "2021-01-11",
          title: "生物可降解高分子材料及其应用",
          name: "陈学思",
          address: "闵行校区霞光楼200号会议室"
        },
        {
          path: "https://news.sjtu.edu.cn/xsjz/20201222/138513.html",
          time: "2020-12-25",
          title: "关爱自己-女性生殖健康",
          name: "吴佳皓",
          address: "校医院（闵行）北楼221会议室"
        },
        {
          path: "https://news.sjtu.edu.cn/xsjz/20201218/138077.html",
          time: "2020-12-22",
          title: "青年教师成长之路（九）",
          name: "赵一新",
          address: "闵行校区陈瑞球楼504室"
        }
        // {
        //   path:"https://news.sjtu.edu.cn/xsjz/20201230/139167.html",
        //   time:"2021 - 01 - 11",
        //   title:"生物可降解高分子材料及其应用",
        //   name:'陈学思',
        //   address:"闵行校区霞光楼200号会议室"
        // }
      ],
      calData: [
        [null, null, null, null, 1, 2, 3],
        [4, 5, 6, 7, 8, 9, 10],
        [11, 12, 13, 14, 15, 16, 17],
        [18, 19, 20, 21, 22, 23, 24],
        [25, 26, 27, 28, 29, 30, 31]
      ]
    };
  },
  methods: {
    swiperInit() {
      this.swiper = new Swiper(this.$refs["swiper-contain"], {
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        slidesPerView: this.$store.state.device == "pc" ? 3 : 1,
        centeredSlides: true,
        loop: true
      });
    }
  },
  mounted() {
    const date = dateFormat("d", new Date());
    console.log(date);
    this.value = date;
    this.swiperInit();
  }
};
</script>

<style scoped lang="scss">
.model {
  width: $base-width;
  margin: 0 auto;
  padding: 15px 0;
  @media only screen and (min-width: 480px) and (max-width: 1200px) {
    /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
    width: 100%;
  }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    /* 在这里写小屏幕设备的样式 */
    width: 100%;
  }
  .logo {
    margin-bottom: 15px;
    img {
      width: 70%;
      margin: auto;
      display: block;
      @media only screen and (min-width: 480px) and (max-width: 1200px) {
        /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
        width: 100%;
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        /* 在这里写小屏幕设备的样式 */
        width: 100%;
      }
    }
  }
  .content {
    position: relative;
    padding-top: 15px;
    .bg {
      height: 180px; // eslint-disable-line
      border: 26px solid #d1d1d1;
      width: 100%;
      position: absolute;
      top: 30px;
      left: 0;
      background-color: #fcfcfc;
    }
    .left {
      height: 200px; // eslint-disable-line
      background-image: url("https://www.sjtu.edu.cn/resource/assets/img/svg/card-learning-1-corner.svg");
      background-size: 100% auto;
      // background-size: contain;
      background-repeat: no-repeat;
      padding: 5px 15px 0 90px;
      @media only screen and (min-width: 480px) and (max-width: 1200px) {
        /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
        background-image: none;
        padding: 5px 15px 0 15px;
      }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        /* 在这里写小屏幕设备的样式 */
        background-image: none;
        padding: 5px 15px 0 25px;
      }
      .swiper-contain {
        height: 90%;
        overflow: hidden;
        .swiper-slide {
          border-right: 1px solid #999;
          padding: 0 8px;
          @media only screen and (min-width: 480px) and (max-width: 1200px) {
            /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
            border-right: none;
          }
          @media screen and (min-width: 320px) and (max-width: 480px) {
            /* 在这里写小屏幕设备的样式 */
            border-right: none;
          }
          a {
            display: block;
            .title {
              font-size: 12px;
              font-weight: 500;
              height: 80px;
              @media only screen and (min-width: 480px) and (max-width: 1200px) {
                /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
                height: 40px;
              }
              @media screen and (min-width: 320px) and (max-width: 480px) {
                /* 在这里写小屏幕设备的样式 */
                height: 40px;
              }
              &:hover {
                color: $base-color;
              }
            }
            .name {
              font-size: 10px;
              font-weight: 600;
            }
            .address {
              font-size: 8px;
            }
            .name {
              margin-bottom: 8px;
            }
          }
        }
      }
    }
    .calder {
      min-height: 210px;
      background-image: url("https://www.sjtu.edu.cn/resource/assets/img/svg/card-learning-2-corner.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      padding-top: 20px;
      .el_divider {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        .text {
          // width: 20%;
          padding: 0 15px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          font-weight: 600;
        }
        &::before {
          content: " ";
          display: block;
          height: 1px;
          background-color: #eee;
          flex-grow: 1;
        }
        &::after {
          content: " ";
          display: block;
          height: 1px;
          background-color: #eee;
          flex-grow: 1;
        }
      }
      .calder-box {
        .tool {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          height: 30px;
          color: #fff;
          .prev,
          .next {
            flex-grow: 1;
            text-align: center;
            height: 100%;
            font-size: 14px;
            font-weight: 600;
            line-height: 30px;
            border-radius: 5px;
            cursor: pointer;
            &:hover {
              background-color: rgba($color: #000000, $alpha: 0.2);
            }
          }
          .now {
            width: 60%;
            height: 100%;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 5px;
            cursor: pointer;
            &:hover {
              background-color: rgba($color: #000000, $alpha: 0.2);
            }
          }
        }
        .calder-box-table {
          width: 100%;
          border-collapse: separate;
          border-spacing: 0px 10px;
          td {
            text-align: center;
            color: #fff;
            font-weight: 600;
            font-size: 10px;
            .date {
              border: 1px solid transparent;
              width: 18px;
              height: 18px;
              display: inline-block;
              text-align: center;
              line-height: 15px;
              border-radius: 3px;
              transition: 0.3s;
              &:hover {
                border-color: #fff;
              }
            }
            .active {
              border-color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>
